<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=11,IE=10,IE=9,IE=8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<title>Title</title>
		<style type="text/css">
			body,
			p,
			dl,
			dd,
			ul,
			ol,
			li,
			div,
			h1,
			h2,
			h3,
			h4,
			h5,
			h6,
			form,
			input,
			table,
			tr,
			td,
			img {
				margin: 0;
				padding: 0;
			}
			
			body {
				width: 100%;
				overflow-x: hidden;
				margin: 0 30px;
			}
			
			.header {
				width: 1230px;
				height: 90px;
				background: #323232;
				line-height: 90px;
				display: flex;
				justify-content: space-around;
				/*margin: auto;*/
			}
			
			.header span {
				font-size: 40px;
				color: #dddddd;
			}
			
			.header input {
				height: 50px;
				width: 730px;
				display: inline-block;
				border-radius: 10px;
				outline: none;
				margin-top: 15px;
				font-size: 30px;
			}
			
			.one {
				width: 1230px;
				background: #cdcdcd;
			}
			
			.one_ing h2,
			.one_end h2 {
				font-size: 40px;
				height: 140px;
				line-height: 140px;
				text-indent: 70px;
			}
			
			h2 .sum_ing {
				display: block;
				width: 40px;
				height: 40px;
				border-radius: 50%;
				background: #e4e6fa;
				line-height: 40px;
				text-align: center;
				font-size: 20px;
				float: right;
				margin: 40px 70px;
				text-indent: 0;
			}
			
			ul {
				list-style: none;
			}
			
			ul li {
				width: 1200px;
				height: 70px;
				line-height: 70px;
				background: #ffffff;
				border-radius: 10px;
				margin: 10px 10px;
				/*display: flex;*/
			}
			ul li:after{
				content: "";
				height: 0;
			    display: block;
			    overflow: hidden;
			    clear: both;
			    visibility: hidden;
			}
			ul li span {
				display: inline-block;
				width: 15px;
				height: 70px;
				border-top-left-radius: 10px;
				border-bottom-left-radius: 10px;
				background: #629a9c;
				float: left;
			}
			
			ul li input {
				display: block;
				height: 30px;
				width: 30px;
				border-radius: 10px;
				background: #FFFFFF;
				float: left;
				margin: 20px 25px;
			}
			
			ul li p {
				height: 70px;
				line-height: 70px;
				font-size: 20px;
				float: left;
				/*margin-left: 100px;*/
			}
			
			ul li img {
				cursor: pointer;
				width: 50px;
				height: 50px;
				float: right;
				margin: 10px 10px;
			}
			
			.end {
				padding-bottom: 20px;
			}
			
			.end li {
				background: #e6e6e6;
			}
			
			.end li span {
				background: #b3b3b3;
			}
			
			.end li input {
				background: #84b3e4;
			}
			
			.end li p {
				color: #676767;
			}
			
			.one_end .tishi {
				font-size: 16px;
				font-weight: 100;
			}
		</style>
	</head>

	<body>
		<div class="body">
			<div class="header">
				<span>ToDoList</span>
				<input type="text" name="" id="header_input" value="" placeholder="添加ToDo" />
			</div>
			<div class="one">
				<div class="one_ing">
					<h2>正在进行  <span class="sum_ing" id="num_ing">
			0
		</span></h2>
					<ul>
						<!--<li>
		  	<span class="left"></span><input type="checkbox" name="" id="" value="" /><p>123123123</p><img src="img/anniu.jpg"/>
		  </li>-->
					</ul>
				</div>
				<div class="one_end">
					<h2>已经完成  <span class="tishi">(温馨提示：已经完成的内容不可随意删除) </span> <span class="sum_ing" id="num_end">
			0
		</span></h2>
					<ul class="end">

					</ul>
				</div>
			</div>
		</div>

		<script src="jquery.js"></script>
		<script>
			window.onload = function() {
				fn();
				var str = getCookie("code");
				console.log(str);
				$1('.end')[0].innerHTML = str;
			}

			function fn() {
				var sum = 0;
				var sum_end = 0;
				$1('#header_input').onkeyup = function(event) {

					var ev = event || window.event;
					if(ev.keyCode == 13) {
						sum++;
						$1('#num_ing').innerHTML = sum;
						var uls = $1('ul');
						var lis = document.createElement('li');
						var span_left = document.createElement('span');
						var input_li = document.createElement('input');
						input_li.type = 'checkbox';
						var p_li = document.createElement('p');
						p_li.innerHTML = $1('#header_input').value;
						var img_li = document.createElement('img');
						img_li.src = 'img/anniu.jpg';
						lis.appendChild(span_left);
						lis.appendChild(input_li);
						lis.appendChild(p_li);
						lis.appendChild(img_li);
						uls[0].appendChild(lis);
						img_li.onclick = function() {
							sum--;
							var lis = this.parentNode.parentNode;
							lis.removeChild(this.parentNode);
							$1('#num_ing').innerHTML = sum;
						}
						input_li.onclick = function() {
							var img = this.parentNode.lastElementChild;
							img.onclick = function() {

							}
							var lis = this.parentNode.parentNode;
							lis.removeChild(this.parentNode);
							uls[1].appendChild(this.parentNode);
		                    addCookie("code",this.parentNode,10);
							sum--;
							$1('#num_ing').innerHTML = sum;
							sum_end++;
							$1('#num_end').innerHTML = sum_end;
						}
						$1('#header_input').value = '';
					}
				}
			}
    //保存cookie
    function addCookie(key,value,dayCount){
	var d = new Date();
	d.setDate(d.getDate()+dayCount);
	document.cookie = key+"="+escape(value)+";expires="+d.toGMTString();
}
    
    //获取cookie
    function getCookie(key){
	var str = unescape(document.cookie);
	
	//1、分割成数组
	var arr=str.split("; ");
	
	//2、循环数组，查找键，并得到对应的值
	for(var i in arr){
		if(arr[i].indexOf(key+"=")==0){
			return arr[i].substring((key+"=").length);
		}
	}
	return null;
}

			function $1(str) { //#box .cls  p
				if(str.charAt(0) == "#") {
					return document.getElementById(str.substring(1));
				} else if(str.charAt(0) == ".") {
					return document.getElementsByClassName(str.substring(1));
				} else {
					return document.getElementsByTagName(str);
				}
			}
			  (function () {
			      console.log($)
			  })()
		</script>
	</body>

</html>